<script setup>
import { ref, watch,onMounted } from "vue";
import requestUtil, { api } from "@/api/request.js";
import { debounce } from "lodash";
import { ElMessage } from "element-plus";
import ResetForm from "@/views/goods/store/components/ResetForm.vue";
import AddForm from "@/views/goods/store/components/AddForm.vue";
let storeId = ref(0);
// 初始化序号值
let indexMethod = ref(1);
// 初始化多选状态
let selections = ref([]);
const delBtnStatus = ref(true)
let tableData = ref([]);
let total = ref(0);
let formVisible = ref(false);
let formVisible2 = ref(false);
const handleSelectionChange = (selection) => {
  // 更新存储选中项的数组
  selections.value = selection
  // 更新批量删除按钮的状态
  delBtnStatus.value = selection.length <= 0
}
const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 10
});
const getStoreList = async () => {
  let res = await requestUtil.get(
  `management/getStoreList/` +
  `?query=${queryForm.value.query}` +
  `&pageNum=${queryForm.value.pageNum}` +
  `&pageSize=${queryForm.value.pageSize}`
);
  tableData.value = res.data.storeInfo;
  total.value = res.data.total;
};

onMounted(() => {
  getStoreList();
});
// 处理每页条数变化
const handleSizeChange = pageSize => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  getStoreList();
};
// 处理当前页变化
const handleCurrentChange = pageNum => {
  queryForm.value.pageNum = pageNum;
  getStoreList();
};
// 创建一个防抖的搜索函数
const debouncedGetUserInfo = debounce(() => {
  getStoreList();
}, 300);
const Edit = (row) => {
    storeId.value = row.id;
    formVisible.value = true;
}

const AddStore = () => {
    formVisible2.value = true;
}
const handleDelete = async (id) => {
    if(id){
    let res = await api.del(`management/deleteStore/?storeId=${id}`)
    if(res.data.code === 200){
      await getStoreList()
      ElMessage.success("删除成功")
    }
  }else{
    let ids = selections.value.map(item => item.id)
    if(ids.length === 0){
      ElMessage.error("请选择要删除的记录")
      return
    }
    else{
      let res = await api.del(`management/deleteStores/?storeIds=${[ids]}`)
      if(res.data.code === 200){
        await getStoreList()
        ElMessage.success("删除成功")
      }
    }
  }
}   
// 使用防抖搜索函数
watch(
  () => queryForm.value.query,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      debouncedGetUserInfo();
    }
  }
);
const handleSubmit = () => {
  getStoreList();
  formVisible.value = false;
  formVisible2.value = false;
};

</script>

<template>
  <el-row :gutter="20" class="header">
    <el-col :span="7">
      <!-- 搜索输入框 -->
      <el-input placeholder="请输入店铺名称..." v-model="queryForm.query" clearable></el-input>
    </el-col>
    <!-- 搜索按钮 -->
    <el-button type="success" :icon="DocumentAdd" @click="AddStore">新增</el-button>
    <el-popconfirm title="您确定批量删除这些记录吗？" @confirm="handleDelete(null)">
      <template #reference>
        <el-button type="danger" :disabled="delBtnStatus" :icon="Delete">批量删除</el-button>
      </template>
    </el-popconfirm>
  </el-row>
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column
      type="index"
      :index="indexMethod+((queryForm.pageNum-1)*queryForm.pageSize)"
      label="序号"
      width="100"
      align="center"
    />
    <el-table-column prop="img" width="150" label="店铺图片" align="center">
      <template #default="scope">
        <img
          :src="api.getServerUrl()+'media/store/'+scope.row.img"
          alt
          style="width: 100px;height: 100px;"
        />
      </template>
    </el-table-column>
    <el-table-column prop="name" width="150" label="店铺名称" align="center" />
    <el-table-column prop="rate" width="150" label="店铺评分" align="center" />
    <el-table-column prop="sale" width="150" label="销量" align="center" />
    <el-table-column prop="price1" width="150" label="起送费" align="center" />
    <el-table-column prop="price2" width="150" label="配送费" align="center" />
    <el-table-column prop="storeType" width="200" label="店铺类型" align="center" />
    <el-table-column prop="create_time" label="店铺入驻时间" width="200" align="center" />
    <el-table-column fixed="right" label="操作" min-width="200" align="center">
      <template #default="scope">
        <el-button
          link
          type="primary"
          v-show="scope.row.role !== '超级管理员'"
          size="small"
          @click="Edit(scope.row)"
        >编辑</el-button>
        <el-popconfirm title="您确定删除这条记录吗？" @confirm="handleDelete(scope.row.id)">
          <template #reference>
            <el-button link type="primary" v-show="scope.row.role !== '超级管理员'" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:currentPage="queryForm.pageNum"
    v-model:page-size="queryForm.pageSize"
    :page-sizes="[10, 20, 30, 40]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <el-dialog v-model="formVisible">
    <ResetForm v-if="formVisible" @cancel="formVisible = false" @submit="handleSubmit" :storeId="storeId"></ResetForm>
  </el-dialog>
  <el-dialog v-model="formVisible2">
    <AddForm v-if="formVisible2" @cancel="formVisible = false" @submit="handleSubmit"></AddForm>
  </el-dialog>
</template>

<style scoped>
</style>